import { ManagerO, WapNav, ShoppingCartO, Qr, ShopCollectO, Gem, GuideO, GemO, Logistics, GoldCoin, Invitation, PendingPayment } from '@react-vant/icons';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Swiper, Image, Grid, Toast } from 'react-vant';
import axios from '../../utils/axios';
import { mainDataTitles } from '../../utils/contants';
import { images } from './constants';
import TopTitleBar from '../../components/TopTitleBar'
import './index.css'
const HomePage = () => {
    const [mainData, setMainData] = useState(null)
    const navigate = useNavigate();
    // 在分类和首页，顶部都有一个 搜索框；
    // 样式不同，但是呢，都能跳转到搜索列表的页面去！！
    // navigate  过去 搜索列表页面！
    // from 传不同的参数！！！
    const getHomeInfos = () => {
        axios.get('/api/v1/index-infos').then(res => {
            setMainData(res.data.data);

        })
    }
    useEffect(() => {
        getHomeInfos();
    }, [])

    return (
        <div className='homePage'>
            {/* HomePage 组件 */}
            {/* 搜索 栏 */}
            {/* 包括 icon => 分类页，拿个变量 切换， 
            搜索 的 栏 
            个人中心 的跳转图标*/}
            <div className="swiper">
                < TopTitleBar
                    leftIcon={<WapNav color='#1eafaf' onClick={() => navigate('/category')} />}
                    rightIcon={<ManagerO onClick={() => navigate('/personalCenter')} />}
                    lable="新锋商城"
                    isThemeColor
                    separatorLine
                    searchBackground
                    searchRightText="山河无恙，人间皆安"
                    searchContentFun={() => navigate('/search')}
                />

                <div className="old">
                    <div className="toCategory, navIcon" onClick={() => navigate('/category')} >
                        <WapNav color='#1eafaf' />
                    </div>
                    <div className="search">
                        {/* 背景图是一个新锋的logo */}
                        <span className='appName'>
                            新锋商城
                        </span>
                        <span className='separatorLine'>
                            {/* | */}
                        </span>
                        {/* 导航到搜索页面去： */}
                        <span className='toSearchText' onClick={() => navigate('/search')}>
                            山河无恙，人间皆安
                        </span>
                    </div>
                    <div className="toPersonalCenter, navIcon" >
                        <ManagerO onClick={() => navigate('/personalCenter')} />
                        {/* 如果是未登录的话，就是 “登录” */}
                    </div>
                </div>


                {/* Carousel chart images */}
                <Swiper autoplay={5000}>
                    {
                        images.map(image => (
                            <Swiper.Item key={image}>
                                <Image lazyload src={image} />
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
            </div>
            <div className="mainCategory" onClick={() => {
                Toast.info('敬请期待')
            }}>
                {/* 上下排列的 分类：上面 是图片，下面是 text 上下排列 
                平均分（flex 布局） 一行 5个 */}
                <Grid columnNum={5} border={false} >
                    <Grid.Item iconColor='#fd7965' icon={<ShoppingCartO />} text='新蜂超市' />
                    <Grid.Item iconColor='#a778fc' icon={<ShopCollectO />} text='新蜂服饰' />
                    <Grid.Item iconColor='#7889fc' icon={<GuideO />} text='全球购' />
                    <Grid.Item iconColor='#13ce66' icon={<GemO />} text='新蜂生鲜' />
                    <Grid.Item iconColor='#7889fc' icon={<Logistics />} text='新蜂到家' />
                </Grid>
                <Grid columnNum={5} border={false} >
                    <Grid.Item iconColor='#fa8c16' icon={<GoldCoin />} text='充值缴费' />
                    <Grid.Item iconColor='#13ce66' icon={<Gem />} text='9.9元拼' />
                    <Grid.Item iconColor='#fd7965' icon={<Invitation />} text='领劵' />
                    <Grid.Item iconColor='#fa8c16' icon={<PendingPayment />} text='省钱' />
                    <Grid.Item iconColor='#1baeae' icon={<Qr />} text='全部' />
                </Grid>
            </div>
            <div className="mainData">
                {/* 在这里做个 map？ 这里是 第一层， 
                下面的那个是第二层！ */}
                {
                    mainData && Object.entries(mainDataTitles).map(a => {
                        const tempKey = Object.keys(mainData).filter(x => {
                            return x === a[0]
                        });

                        return <div className='mainData' key={a[0]}>
                            <h1 className='mainProductsTitle'>
                                {/* 请求首页数据，然后第二层  for 循环： */}
                                {a[1]}
                            </h1>
                            <div className="mainProductsData">
                                {
                                    mainData[tempKey] && mainData[tempKey].map(product => {
                                        return <div className="product" key={product.goodsId} onClick={
                                            // 把 goodsId 传过去哦！
                                            () => navigate('/productDetails', {
                                                state: {
                                                    goodsId: product.goodsId
                                                }
                                            })
                                        }>
                                            <div className="productImg">
                                                {/* 商品图片 */}
                                                <Image width='100' height='100' src={product.goodsCoverImg} />
                                            </div>
                                            <div className="productName">
                                                {/* 名字 */}
                                                {product.goodsName
                                                }
                                            </div>
                                            <div className="productPrice">
                                                {/* 价格 */}
                                                {
                                                    '¥' + product.sellingPrice
                                                }
                                            </div>
                                        </div>
                                    })
                                }

                                {/* 上下排列的产品 ： */}
                            </div>
                        </div>
                    })

                }
            </div>

        </div>
    )
}

export default HomePage;